<template>
  <div id="app"  v-bind:style="appDivStyle">
      <div class="context" ref="context">
           <div class="queryBox" ref="queryBox">
                <el-form :model="formQueryCondition"
                         ref="form" size="mini">
                    <!--查询条件-->
                     <!--分类名称-->
                  <el-row>
                    <el-col :span="10">
                    <el-form-item :label="$t('Capital.table.capitalName')"   :label-width="queryformLabelWidthLong">
                        <el-input v-model.trim="formQueryCondition.capitalName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('Capital.queryLabel.placeholderCapitalName')">
                        </el-input>
                    </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                    <!--分类编号 class="separateStyle"-->
                    <el-form-item :label="$t('Capital.table.capitalCode')" :label-width="queryformLabelWidthLong" >
                        <el-input v-model.trim="formQueryCondition.capitalCode.val" class="queryItemStyle" clearable
                                  :placeholder="$t('Capital.queryLabel.placeholderCapitalCode')"></el-input>
                    </el-form-item>
                    </el-col>
                    <!--下发状态"-->
                    <el-col :span="10" :offset="1">
                    <el-form-item :label="$t('Capital.table.sendtoState')" :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.sendtoState.val" class="queryItemStyle">
                            <el-option :label="$t('label.all')" value=""></el-option>
                            <!-- <el-option :value="item.keyId" :key="item.keyId" :label="item.roleName" v-for="item in roles"></el-option> -->
                            <el-option :value="drug.valueCode" :key="drug.valueCode" :label="drug.valueText" v-for="drug in sendStateGroup"></el-option>
                        </el-select>
                    </el-form-item>
                    </el-col>
                  </el-row>


                    <!--列表上面的按钮-->
                  <el-row>
                    <el-col :span="24">
                      <div style="text-align:right">
                        <el-form-item>
                          <el-button type="primary" @click="determine(tableChecked)" >确定</el-button>
                          <el-button type="primary" @click="onReset" :loading="loading" >{{ $t('btnText.resetBtnText') }}</el-button>
                          <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading" >{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                      </div>
                    </el-col>
                  </el-row>
                    <div style="text-align:left">
                      <!--当前选择&nbsp;&nbsp;{{tableChecked.length}}&nbsp;&nbsp;条数据
                      :disable-transitions="false"
                      -->已选择：
                      <el-tag
                      :key="item.keyId"
                      v-for="item in tableChecked"
                      size="medium"
                      >
                      {{item.capitalName}}
                    </el-tag>
                      <!-- <span v-for="actor in tableChecked" :key="actor.keyId">{{actor.actorName+" "}}</span> -->
                    </div>
                </el-form>
            </div>
            <!--列表  -->
            <!-- @selection-change="handleSelectionChange"
            :selectable="checkboxInit"
            @select="handleSelectionChange" -->
            <div class="dataBox" ref="dataBox">

                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            @select="handleSelectionChange"
                            class="jySelectionAll"
                            :row-key="getRowKeys"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <!---->
                    <el-table-column type="selection" :reserve-selection="true" align="center"  width="50" fixed="left" >
                    </el-table-column>
                    <el-table-column fixed="left" :label="$t('table.op')" min-width="80">
                        <template slot-scope="scope">
                          <!--下发-->
                            <el-button size="gv" icon="el-icon-delete"
                                  v-permission="{menuCode: menuCode,resourceCode: 'sendBtnText'}" :disabled="scope.row.sendtoState!='StayDown'"
                                    type="danger" :loading="loading" @click="onSend(scope.$index, scope.row,'sendBtnText')"
                                   >{{ $t('ParentAssetIssuance.btnText.sendBtnText') }}</el-button>
                          </template>
                    </el-table-column>

                    <!--资产分类名称-->
                    <el-table-column prop="capitalName" min-width="160" fixed="left"
                                        :label="$t('Capital.table.capitalName')" sortable="custom" sort-by="assetName">
                    </el-table-column>
                     <!--资产分类编号-->
                    <el-table-column prop="capitalCode" min-width="180" fixed="left"
                                        :label="$t('Capital.table.capitalCode')" sortable="custom" sort-by="assetCode">
                    </el-table-column>
                    <!--下发状态-->
                    <el-table-column prop="sendtoStateName" min-width="180" fixed="left"
                                        :label="$t('Capital.table.sendtoState')" sortable="custom" sort-by="sendtoState">
                    </el-table-column>
                    <!--创建时间-->
                    <el-table-column prop="createdDate" min-width="180"
                                        :label="$t('shellAssets.table.shellAssets.createTime')" sortable="custom" sort-by="createdDate">
                    </el-table-column>
                    <!--最后修改时间-->
                    <el-table-column :label="$t('shellAssets.table.lastUpdateTime')" min-width="180" sortable="custom" prop="lastUpdatedDate" sort-by="lastUpdatedDate">
                    </el-table-column>
                    <!--最后修改人-->
                    <el-table-column :label="$t('shellAssets.table.lastUpdatedBy')" min-width="180" sortable="custom" prop="modifier" sort-by="modifier">
                    </el-table-column>

                </el-table>


            </div>
        </div>
        <!--分页-->
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>
  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'ShellAssets',
  props: {
    menuCode: String,
    datas:{
    isClear: String
    }
  },
  data () {
    return {
        isInit:false,
        tableHeight:100,
        queryformLabelWidthLong:"100px",
        // queryformLabelWidth:"84px",
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"com.ispr.iptv.entity.media.CapitalEntity",//操作的实体类F
        tableChecked: [],
        //
        changeLogData:[],
        sendStateGroup:[],
        // 查询条件
        formQueryCondition: {
            capitalCode: {
                key: "capitalCode",
                op: "LIKE", // 操作符
                val: ""
            },
            capitalName: {
                key: "capitalName",
                op: "LIKE", // 操作符
                val: ""
            },
            sendtoState: {
                key: "sendtoState",
                op: "=", // 操作符
                val: ""
            },
            isEnable: {
                key: "isEnable",
                op: "=", // 操作符
                val: "Invalid"
            },
        },

        dataForm: {
            keyId: 0,
            version: 0,
            assetCode: "",
            assetName: "",
            assetSource: "",
            assetType: "",
            assetProvider:"",
            status:"",
            createTime:"",
            updateTime:"",
            tag:"",
            sort:"",
            copyRightTimeS:"",
            copyRightTimeE:"",
            copyRightSource:"",
            copyRightRemark:"",
            cnName:"",
            firstChar:"",
            year:"",
            area:"",
            language:"",
            count:"",
            contentSort:"",
            director:"",
            adaptor:"",
        },
    }
  },
  methods:{

    onReset: function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.capitalCode.val = "";
        this.formQueryCondition.capitalName.val = "";
    },

    //下发
    onSend:function(index, row, rescode){
      this.currentResCode = (rescode && rescode !== '') ? rescode : '';
      var _this = this;
      this.$confirm(this.$i18n.t("message.confirmSendMessage"),
          this.$i18n.t("message.confirmTitle"), {
          confirmButtonText: this.$i18n.t("message.yes"),
          cancelButtonText: this.$i18n.t("message.cancel"),
          type: "warning",
          callback: function (action, instance) {
              if (action == "confirm") {
                _this.sendType = "single";//单条下发
                _this.singleSend = {};
                let dataList = [];//最终传给后台的总数据
                let keyId = row.keyId;
                let version = row.version;
                let resType = "AT";
                let state = "Untreated";
                let data = {"keyId":keyId,"version":version,"resType":resType,"state":state};
                _this.singleSend = data;
                dataList.push(_this.singleSend);
                _this.loading = true;
                _this.procCommand("MediaSendToProc",
                _this.modelName,
                "Default",
                {
                    "dataList":dataList,
                },
                null,
                _this.submitFormCallback);

              }

          }
      });

    },

    //checkbox单选完毕，点击确定按钮返回父组件
    determine: function(rows){
        if(rows.length == 0){
            this.$message({
                message: this.$i18n.t("请选择要恢复的资产分类"),//resource.message.successTip,
                type: 'warning'
            });
            return;
        }
        console.info("---------",rows);
        let result = []
        rows.forEach(element=>{
          let data = {"keyId":element.keyId,"version":element.version,"sendtoState":"StayDown","isEnable":"Available"};
          result.push(data);
        });
        this.$emit("capital",result,false);
    },

    getRowKeys(row) {
        return row.keyId;
    },

    handleSelectionChange(selection,val) {
      // debugger
         // 判断当前点击的是打钩还是取消打钩 true 则是打勾
        let isSelected = this.isExistRow(selection, val, 'keyId');
        if(isSelected){
            // 勾选
          if (!this.isExistRow(this.tableChecked, val, 'keyId')) {
            this.tableChecked.push(val);
          }
        }else {
            // 取消勾选
            for (let i in this.tableChecked) {
              if (this.tableChecked[i].keyId === val.keyId) {
                this.tableChecked.splice(i, 1);
              }
            }
          }

      },
      // 判断 arrs数组中是否存在row 存在则返回true
    isExistRow: function isExistRow (arrs, row, field) {
      let flag = false;
      arrs.forEach(function (item) {
        if (row[field] === item[field]) {
          flag = true;
        }
      });
      return flag;
    },

    // 查询网格数据
    queryTable: function() {

      this.loading = true;
      this.queryModel(
        this.modelName,
        "Query",
        this.formQueryCondition,
        this.pager,
        this.sort,
        this.setTableData
      );
    },

    // 查询网格数据成功后的回调
    setTableData: function(isSuccess,json) {

        if(this.datas.isClear === "true"){
          this.tableChecked = [];
          this.$refs.singleTable.clearSelection();
          }

        this.currentResCode = '';
        this.loading = false;

        try{
            if (isSuccess) {
                //alert(JSON.stringify(json));
                this.pager.total = json.total;
                this.tableData = [];
                this.datas.isClear = "false";
                for (var i = 0; i < json.list.length; i++) {
                    this.tableData.push(json.list[i]);
                }
                // this.datas.isClear = false;

            }
            else {
                this.$message.error(json.msg);
            }
        }
        catch(e){
            alert(e);
        }
    },

    // 为下发状态下拉框赋值
  findSendState: function() {
      this.findByTypeCode("10011",this.setSendStates)
  },
  // 查询状态下拉框数据成功后的回调
  setSendStates: function(isSuccess,json) {
      try{
          if (isSuccess) {
              this.sendStateGroup = [];
              for (var i = 0; i < json.data.length; i++) {
                  this.sendStateGroup.push(json.data[i]);
              }
          }
          else {
              this.$message.error(json.msg);
          }
      }
      catch(e){
          alert(e);
      }
  },

    initTable:function(){
        //alert("setTimeout");
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },

  },
  mounted: function mounted() {
    this.onQuery();
    this.findSendState();
    window.setTimeout(this.initTable,100);
  },

}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* 隐藏网格的全选按钮 */
.jySelectionAll >.el-table__fixed>.el-table__fixed-header-wrapper>.el-table__header> thead >tr>th >.cell>label {
  display: none;
}
/* 隐藏网格的全选按钮 */
.jySelectionAll >.el-table__header-wrapper>.el-table__header> thead >tr>th >.cell >label {
  display: none !important;
}
</style>

<style scoped>
.separateStyle{
    margin-left: 25px;
}
</style>
